import styled from "@emotion/styled";
import { Button } from "antd";
import { Icon, Row } from "components/lib";
import { boxBg, BoxShadow, fontColor, viewWidth } from "components/style";
import { useDispatch } from "react-redux";
import { Link } from "react-router-dom";
import { mainActions } from "./main.slice";
export const HeaderScreen = () => {
  const dispatch = useDispatch();
  return (
    <Header between={true}>
      <Link to={"/content"} onClick={()=>dispatch(mainActions.onSetTag(""))}>
        <HeaderLeft type={"link"}>
          <Icon name={"icon-shouyefill"}></Icon>
          <LogoTitle>{"Lookthis.cc"}</LogoTitle>
        </HeaderLeft>
      </Link>
      <HeaderRight></HeaderRight>
    </Header>
  );
};

const LogoTitle = styled.span`
  font-weight: bold;
`;
const Header = styled(Row)`
  padding: 1.2rem 3.2rem;
  ${BoxShadow}
  width: 100%;
  height: 4rem;
  background-color: ${boxBg};
  position: fixed;
  max-width: ${viewWidth};
  z-index: 10;
  color: ${fontColor};
`;

const HeaderLeft = styled(Button)``;
const HeaderRight = styled.div``;
